@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .commands div { display: inline-block; width: auto; }
    .el-upload, .el-upload-dragger { display: inline-block; width: 100%; }
  </style>
}

<el-container>
  <el-aside width="100px">
    <el-tabs v-model="navType" tab-position="left" style="height: 100%;" v-on:tab-click="btnNavClick">
      <el-tab-pane label="数据列表" name="Data"></el-tab-pane>
      <el-tab-pane label="字段管理" name="Styles"></el-tab-pane>
      <el-tab-pane label="选项设置" name="Settings"></el-tab-pane>
    </el-tabs>
  </el-aside>

  <el-container>
    <el-main>

      <div style="height: 10px"></div>

      <el-table :data="styles" style="width: 100%">
        <el-table-column label="排序" prop="taxis" width="60">
          <template slot-scope="scope">
            {{ scope.row.taxis ? scope.row.taxis : '' }}
          </template>
        </el-table-column>
        <el-table-column label="字段名" prop="attributeName"></el-table-column>
        <el-table-column label="显示名称" prop="displayName"></el-table-column>
        <el-table-column label="提交类型" width="120">
          <template slot-scope="scope">
            {{ getInputType(scope.row.inputType) }}
          </template>
        </el-table-column>
        <el-table-column label="验证规则">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              v-on:click="btnValidateClick(scope.row.attributeName)"
              type="primary">
              {{ getRules(scope.row.rules) }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              v-on:click="btnEditClick(scope.row.attributeName)"
              type="primary">
              编辑
            </el-link>
            <el-link
              :underline="false"
              v-if="!scope.row.isSystem"
              type="danger"
              v-on:click="btnDeleteClick(scope.row.attributeName)">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <div style="height: 10px"></div>
      <el-divider></el-divider>
      <div style="height: 10px"></div>

      <el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-plus" v-on:click="btnAddClick">
        新增字段
      </el-button>
      <el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-folder-add" v-on:click="btnAddMultipleClick">
        批量新增字段
      </el-button>
      <el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-upload" v-on:click="btnImportClick">
        导 入
      </el-button>
      <el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-download" v-on:click="btnExportClick">
        导 出
      </el-button>

      <el-drawer
        title="导入样式"
        ref="uploadPanel"
        :visible.sync="uploadPanel"
        destroy-on-close
        direction="rtl"
        size="50%">
        <div class="drawer__content">
          <br />
          <el-form ref="uploadForm" label-width="200px">
            <el-upload
              :drag="true"
              :limit="1"
              :action="urlUpload"
              :auto-upload="true"
              :headers="{Authorization: 'Bearer ' + $token}"
              :file-list="uploadList"
              :before-upload="uploadBefore"
              :on-progress="uploadProgress"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :multiple="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
            </el-upload>
          </el-form>
        </div>
      </el-drawer>

    </el-main>
  </el-container>
</el-container>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/cms/formStyles.js" type="text/javascript"></script>
}
